<template>
  <div>
    <TitleSecondary title="会议纪要明细" />
    <div style="margin-bottom: 20px">
      <ButtonGroup
        v-if="!isEdit"
        :options="clueButtons"
        style="margin-bottom: 20px"
        @click="handleButtonClick"
      />
      <p-table
        class="table-list-container"
        :custom-header-row="customHeaderRowMinxin"
        row-key="id"
        :columns="columns"
        :pagination="false"
        bordered
        :data-source="meetDetailData"
        :loading="loadMeet"
        :row-selection="rowSelectionMixin"
        @change="handleTableChange"
      >
      </p-table>
    </div>
  </div>
</template>

<script>
import mixinTable from '@/mixins/mixin-table.js';
import { postDownMeetModel, getDownMeetDetail } from '@/api/visit.js';
import { downloadFile } from '@/utils/index.js';
let index = 0;
export default {
  mixins: [mixinTable],
  props: {
    meetDetailData: {
      type: Array,
      default: () => [],
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
    loadMeet: {
      type: Boolean,
      default: false,
    },
    minutesId: {
      type: String,
      default: '',
    },
    isShowExport: {
      type: Boolean,
      default: false,
    },
    isDelete: {
      type: Boolean,
      default: false,
    },
    isInsert: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  computed: {
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '主题',
          dataIndex: 'topic',
          ellipsis: true,
          width: 300,
          required: true,
          customRender: (value, row, index) => {
            const children = (
              <InputDefault
                value={value}
                max={255}
                width={'100%'}
                isEdit={row.isEdit !== undefined}
                vOn:change={(e) =>
                  this.handleInputChange(e, value, row, index, 'topic')
                }
              />
            );
            return this.customRender(children);
          },
        },
        {
          align: 'center',
          title: '内容',
          dataIndex: 'content',
          ellipsis: true,
          required: true,
          customRender: (value, row, index) => {
            const children = (
              <InputDefault
                value={value}
                max={255}
                width={'100%'}
                isEdit={row.isEdit !== undefined}
                vOn:change={(e) =>
                  this.handleInputChange(e, value, row, index, 'content')
                }
              />
            );
            return this.customRender(children);
          },
        },
        {
          align: 'center',
          title: '备注',
          dataIndex: 'remark',
          ellipsis: true,

          customRender: (value, row, index) => {
            const children = (
              <InputDefault
                value={value}
                max={255}
                width={'100%'}
                isEdit={row.isEdit !== undefined}
                vOn:change={(e) =>
                  this.handleInputChange(e, value, row, index, 'remark')
                }
              />
            );
            return this.customRender(children);
          },
        },
        {
          align: 'center',
          title: '创建时间',
          dataIndex: 'createTime',
          ellipsis: true,
        },
      ];
      return columns;
    },
    clueButtons() {
      const disabled = !this.rowSelectionMixin.selectedRowKeys.length;
      return [
        {
          key: 'meetDetailAdd',
          type: 'primary',
          label: '新增',
          icon: 'plus',
          authKey: '',
          disabled: this.isShowExport,
        },
        {
          key: 'meetDetailDelete',
          label: '删除',
          icon: 'delete',
          authKey: '',
          disabled,
        },
        {
          key: 'model',
          label: '会议纪要模板',
          authKey: '',
        },
        {
          key: 'import',
          label: '导入',
          authKey: '',
          disabled: this.isShowExport,
        },
        {
          key: 'export',
          label: '导出',
          authKey: '',
          disabled: this.isShowExport,
        },
      ];
    },
  },
  created() {
    // this.createMeetDetail();
  },
  methods: {
    handleInputChange(e, text, record, index, key) {
      record[key] = e;
    },
    handleButtonClick(key) {
      const fn = `${key}Callback`;
      this[fn] && this[fn]();
    },
    createMeetDetail() {
      return {
        id: `${index++}_meet`,
        topic: '',
        content: '',
        remark: '',
        isEdit: true,
      };
    },
    customRender(children, index, row, key) {
      const attrs = {};
      // if (this.totalIndex.includes(index)) {
      //   attrs.colSpan = 0;
      // }
      // if (!this.isEdit && (key === 'planSalesId' || key === 'selection')) {
      //   const data = this.groups[row.planSalesId];
      //   if (row.id === data[0].id) {
      //     attrs.rowSpan = data.length;
      //   } else {
      //     attrs.rowSpan = 0;
      //   }
      // }
      return {
        children,
        attrs,
      };
    },
    meetDetailAddCallback() {
      this.$emit('update:isInsert', true);
      this.$emit('update:meetDetailData', [
        ...this.meetDetailData,
        this.createMeetDetail(),
      ]);
    },
    importCallback() {
      this.$emit('import-meet');
    },
    async exportCallback() {
      const data = {
        minutesId: this.minutesId,
      };
      const result = await getDownMeetDetail(data);
      await downloadFile(result.data, result.filename || '会议纪要详情.xls');
    },
    async modelCallback() {
      const result = await postDownMeetModel();
      await downloadFile(result.data, result.filename || '会议纪要模板.xls');
    },
    meetRecordAddCallback() {
      this.$emit('meet-record-add');
    },
    meetDetailDeleteCallback() {
      const ids = this.rowSelectionMixin.selectedRowKeys;
      this.$confirm(`该操作将删除 ${ids.length} 条数据，是否确认？`)
        .then(() => {
          ids.forEach((el) => {
            this.meetDetailData.forEach((item, i) => {
              if (item.id === el) {
                this.meetDetailData.splice(i, 1);
              }
            });
          });
          this.$emit('update:isDelete', true);
          this.$emit('update:meetDetailData', this.meetDetailData);
          this.rowSelectionMixin.selectedRowKeys = [];
        })
        .catch(() => {
          // console.log('e: ', e);
        });
    },
  },
};
</script>
